<template>
  <div class="transfer-order-detail">
    <div class="layout">
      <section class="top">
        <h2 class="top-title">转运申请单</h2>
        <section class="first section">
          <section class="row">
            <section class="column column2">
              <span class="first-column">申请日期</span>
              <span>{{transferOrderDetail.applyTime}}</span>
            </section>
            <section class="column">
              <span>预转运时间</span>
              <span>{{transferOrderDetail.planTransferTime}}</span>
            </section>
          </section>
          <section class="row">
            <section class="column">
              <span class="first-column">转出医院</span>
              <span>{{transferOrderDetail.fromHospital}}</span>
            </section>
            <section class="column">
              <span>科室</span>
              <span>{{transferOrderDetail.fromDepartment}}</span>
            </section>
            <section class="column">
              <span>联系人</span>
              <span>{{transferOrderDetail.fromConnector}}</span>
            </section>
            <section class="column">
              <span>电话</span>
              <span>{{transferOrderDetail.fromConnectPhone}}</span>
            </section>
          </section>
          <section class="row">
            <section class="column">
              <span class="first-column">接收医院</span>
              <span>{{transferOrderDetail.toHospital}}</span>
            </section>
            <section class="column">
              <span>科室</span>
              <span>{{transferOrderDetail.toDepartment}}</span>
            </section>
            <section class="column">
              <span>联系人</span>
              <span>{{transferOrderDetail.toConnector}}</span>
            </section>
            <section class="column">
              <span>电话</span>
              <span>{{transferOrderDetail.toConnectPhone}}</span>
            </section>
          </section>
          <section class="row">
            <section class="column">
              <span class="company-doctor">有陪同转运医生</span>
              <div class="radio-wrapper">
                <el-radio v-model="transferOrderDetail.isAccompany" label="1">有</el-radio>
                <el-radio v-model="transferOrderDetail.isAccompany" label="2">无</el-radio>
              </div>
            </section>
            <section class="column">
              <span>陪同人员</span>
              <span>{{transferOrderDetail.accompanior}}</span>
            </section>
            <section class="column">
              <span>电话</span>
              <span>{{transferOrderDetail.accompaniedPhone}}</span>
            </section>
          </section>
          <section class="row">
            <section class="column">
              <span class="info-hospital">已通知接收医院</span>
              <div class="radio-wrapper">
                <el-radio v-model="transferOrderDetail.isNotice" label="1">是</el-radio>
                <el-radio v-model="transferOrderDetail.isNotice" label="2">否</el-radio>
              </div>
            </section>
            <section class="column">
              <span>家属联系电话</span>
              <span>{{transferOrderDetail.familyPhone}}</span>
            </section>
          </section>
        </section>
        <section class="second section">
          <section class="row">
            <section class="column">
              <span class="first-column">患者姓名</span>
              <span>{{transferOrderDetail.patientName}}</span>
            </section>
            <section class="column">
              <span>性别</span>
              <div class="sex-radio">
                <el-radio v-model="transferOrderDetail.sex" label="男">男</el-radio>
                <el-radio v-model="transferOrderDetail.sex" label="女">女</el-radio>
              </div>
            </section>
            <section class="column">
              <span>年龄</span>
              <span>{{transferOrderDetail.age}}</span>
            </section>
            <section class="column transfer-type">
              <div>
                <el-radio
                  v-model="transferOrderDetail.patientType"
                  :label="item.id"
                  v-for="(item,index) of transferOrderTypeList"
                  :key="index"
                >{{item.name}}</el-radio>
              </div>
            </section>
          </section>
          <section class="row">
            <section class="column">
              <span class="first-column">就诊日期</span>
              <span>{{transferOrderDetail.treamentTime}}</span>
            </section>
            <section class="column">
              <span>病情程度</span>
              <span>{{transferOrderDetail.diseaseDegree}}</span>
            </section>
            <section class="column column2">
              <span>诊断</span>
              <span class="diagnosis">{{transferOrderDetail.diagnosis}}</span>
            </section>
          </section>
        </section>
        <section class="third section">
          <section class="row">
            <section class="column column3">
              <span class="first-column">体格检查</span>
              <div class="check-body">
                <span>T:{{transferOrderDetail.temperature}}℃</span>
                <span>P:{{transferOrderDetail.pulse}}次/分</span>
                <span>R:{{transferOrderDetail.breath}}次/分</span>
                <span>BP:{{transferOrderDetail.diastolic}}/{{transferOrderDetail.systolic}}mmHg</span>
                <span>SpO:{{transferOrderDetail.saturation}}%</span>
              </div>
            </section>
            <section class="column">
              <span>神志</span>
              <span>{{transferOrderDetail.mind}}</span>
            </section>
          </section>
        </section>
        <section class="four section">
          <section class="row">
            <section class="column column2">
              <span class="first-column">静脉输液</span>
              <div class="is-iv-infuse">
                <el-radio v-model="transferOrderDetail.isInfusion" label="1">有</el-radio>
                <el-radio v-model="transferOrderDetail.isInfusion" label="2">无</el-radio>
              </div>
              <div class="type-iv-infuse">
                <el-radio
                  v-model="transferOrderDetail.infusionType"
                  :label="item.id"
                  v-for="(item,index) of infuseWayList"
                  :key="index"
                >{{item.name}}</el-radio>
              </div>
            </section>
            <section class="column">
              <span>心电监护</span>
              <div class="equal-span">
                <el-radio v-model="transferOrderDetail.isECGMonitor" label="1">有</el-radio>
                <el-radio v-model="transferOrderDetail.isECGMonitor" label="2">无</el-radio>
              </div>
            </section>
            <section class="column">
              <span>吸痰器</span>
              <div class="equal-span">
                <el-radio v-model="transferOrderDetail.isSuction" label="1">有</el-radio>
                <el-radio v-model="transferOrderDetail.isSuction" label="2">无</el-radio>
              </div>
            </section>
          </section>
          <section class="row">
            <section class="column column2">
              <span class="first-column">给氧方式</span>
              <div class="give-oxy-way-radio">
                <el-radio
                  v-model="transferOrderDetail.giveOxyWay"
                  :label="item.id"
                  v-for="(item,index) of giveOxyWayList"
                  :key="index"
                >{{item.name}}</el-radio>
              </div>
            </section>
            <section class="column">
              <span>氧流量</span>
              <span>{{transferOrderDetail.oxygenFlow}}L/分</span>
            </section>
            <section class="column">
              <span>氧浓度</span>
              <span>{{transferOrderDetail.oxygenDensity}}%</span>
            </section>
          </section>
          <section class="row">
            <section class="column">
              <span class="new-born-box">新生儿暖箱</span>
              <div>
                <el-radio v-model="transferOrderDetail.newBornBox" label="1">有</el-radio>
                <el-radio v-model="transferOrderDetail.newBornBox" label="2">无</el-radio>
              </div>
            </section>
          </section>
        </section>
      </section>
      <keep-alive>
        <component :is="footer" :transferOrderDetail="transferOrderDetail"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import TransferOrderFinishFooter from "./TransferOrderFinishFooter";
import TransferOrderUpFooter from "./TransferOrderUpFooter";
export default {
  name: "TransferOrderDetail",
  data() {
    return {
      transferOrderTypeList: "",
      transferOrderDetail: {},
      footer: TransferOrderFinishFooter,
    };
  },
  methods: {
    GetTransferOrderTypeList() {
      this.$axios({
        data: this.$qs.stringify({
          MessageType: "GetTransferOrderTypeList",
        }),
        method: "post",
      }).then((res) => {
        console.log("GetTransferOrderTypeList", res);
        if (res.status == 200) {
          let obj = res.data;
          if (obj.status == 200) {
            this.transferOrderTypeList = obj.data;
          } else {
            this.$message.error(obj.message);
          }
        } else {
          this.$message.error("请求交接单类型列表失败");
        }
      });
    },
    GetTransferOrderDetail(transferOrder) {
      this.$axios({
        data: this.$qs.stringify({
          MessageType: "GetTransferOrderDetail",
          transferOrder: transferOrder,
        }),
        method: "post",
      }).then((res) => {
        console.log("GetTransferOrderDetail", res);
        if (res.status == 200) {
          let obj = res.data;
          if (obj.status == 200) {
            this.transferOrderDetail = obj.data;
            this.$store.dispatch("SaveTransferOrderDetail", obj.data);
          } else {
            this.$message.error(obj.message);
          }
        } else {
          this.$message.error("请求交接单详情失败");
        }
      });
    },
  },
  mounted() {
    let transferOrder = this.$store.state.transferOrder;
    let list = this.$store.state.remoteTransferOrderList;
    if (list.length == 0) {
      this.footer = TransferOrderFinishFooter;
    } else {
      let isHas = list.findIndex(q=>q.transferOrder==transferOrder);
      if (isHas>-1) {
        this.footer = TransferOrderUpFooter;
      } else {
        this.footer = TransferOrderFinishFooter;
      }
    }
    this.GetTransferOrderTypeList();
    this.GetTransferOrderDetail(transferOrder);
  },
  computed: {
    giveOxyWayList() {
      return this.$store.state.giveOxyWayList;
    },
    infuseWayList() {
      return this.$store.state.infuseWayList;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.transfer-order-detail >>> .el-radio__label {
  color: #fff;
  font-size: 20px;
}
.transfer-order-detail >>> .el-radio__inner {
  width: 21px;
  height: 21px;
}
.transfer-order-detail >>> .el-radio__inner::after {
  width: 10px;
  height: 10px;
}
.transfer-order-detail {
  height: 90%;
  display: flex;
  justify-content: center;
  padding-top: 2%;
}
.layout {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  color: #fff;
  font-size: 20px;
}
.top {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  flex-grow: 1;
  background: url("../assets/image/content-bg.png") rgba(6, 53, 128, 0.2);
  background-size: 100% 100%;
}
.top-title {
  color: #fff;
  background: url("../assets/image/titlebg.png");
  background-size: 100% 100%;
  width: 300px;
  font-size: 21px;
  display: flex;
  justify-content: center;
  height: 54px;
  margin-top: -27px;
  line-height: 54px;
}
.section {
  width: 90%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.row {
  display: flex;
}
.column {
  display: flex;
  width: 25%;
}
.column2 {
  width: 50%;
}
.column3 {
  width: 75%;
}
.column .first-column {
  display: block;
  width: 24% !important;
  text-align: left !important;
  padding-right: 0 !important;
}
.column2 .first-column {
  display: block;
  width: 12% !important;
  text-align: left !important;
  padding-right: 0 !important;
}
.column3 .first-column {
  display: block;
  width: 8% !important;
  text-align: left !important;
  padding-right: 0 !important;
}
.column > span:nth-child(1) {
  display: block;
  width: 40%;
  text-align: right;
  padding-right: 3%;
}
.column > span:nth-child(2) {
  display: block;
  width: 60%;
  border: solid 1px rgba(0, 181, 243, 0.7);
  background: rgba(6, 53, 128, 0.3);
  padding-left: 10px;
}
.column2 > span:nth-child(2) {
  width: 30%;
}
.column2 > span:nth-child(1) {
  width: 20%;
}
.equal-span {
  width: 230px;
}
.info-hospital,
.company-doctor {
  width: 40% !important;
  text-align: left !important;
  padding-right: 0 !important;
}
.sex-radio {
  width: 60%;
}
.diagnosis {
  width: 80% !important;
}
.give-oxy-way-radio {
}
.transfer-type {
  display: flex;
  justify-content: flex-end;
}
.first {
  flex-grow: 5;
  border-bottom: solid 1px rgba(0, 189, 252, 0.1);
}
.second {
  flex-grow: 2;
  margin-top: 1%;
  border-bottom: solid 1px rgba(0, 189, 252, 0.1);
}
.third {
  flex-grow: 1;
  margin-top: 1%;
  border-bottom: solid 1px rgba(0, 189, 252, 0.1);
}
.four {
  flex-grow: 3;
  margin-top: 1%;
}
.check-body {
  width: 92%;
  border: solid 1px rgba(0, 181, 243, 0.7);
  display: flex;
}
.check-body > span {
  border-right: 1px solid rgba(0, 181, 243, 0.7);
  width: 20%;
  text-align: center;
}
.is-iv-infuse {
}
.type-iv-infuse {
  margin-left: 10%;
}
.new-born-box {
  width: 32% !important;
  text-align: left !important;
}
</style>